<template>
    <div class="types">
        <Header :isBack="isBack" :title="title"></Header>
        <div class="top-list bg-f">
            <swiper :options="swiperOption" class="swiper" >
                <swiper-slide>
                    <div class="item">
                        <p class="fs-32" :class="{current:inx==-2}" @click="select(-2,'')">热门节目</p>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="item">
                        <p class="fs-32" :class="{current:inx==-1}" @click="select(-1,'')">热门电台</p>
                    </div>
                </swiper-slide>
                <swiper-slide v-for="(item,index) in typelist" :key="index">
                    <div class="item">
                        <p class="fs-32" :class="{current:index==inx}" @click="select(index,item)">{{item.cate_name}}</p>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <div class="content bg-f">
            <div class="hot-show" v-if="inx==-2">
                <div class="top padding-24 space-between">
                    <div class="left center-col">
                        <p class="">更新时间：8月22日</p>
                        <span class="color-9 center yuan" @touchstart='show' @touchmove="show" @touchend="notshow">!</span>
                        <div class="tishi color-f center" v-if="tishi">选取24小时内发布的内容热度变化排行，每6小时更新。</div>
                    </div>
                    <p>播放全部</p>
                </div>
                <div class="list" v-if="radiolist[0]">
                    <div class="list-item padding-24 space-between" v-for="item in radiolist">
                        <img :src="item.program_cover" alt="" class="left">
                        <div class="right space-between">
                            <div class="flex-column">
                                <p class="fs-32 overFlow">{{item.program_name}}</p>
                                
                                <div class="center-col">
                                    <img :src="item.user_info[0].user_avator" alt="" class="yuan">
                                    <p class="fs-22">{{item.user_info[0].nickname}}</p>
                                    <img :src="fire" alt="" class="fire">
                                    <p class="fs-22">{{item.view_number}}</p>
                                </div>
                            </div>
                            <div class="play" @click="play(item)">
                                <img :src="playing" alt="" v-if="item.id==playid">
                                <img :src="noplay" alt="" v-else>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="center nocontent" v-else>暂无节目</div>
            </div>
            <div class="type-list" v-else-if="inx==-1">
                <div v-if="hotradio[0]">
                    <div class="list-item space-between padding-24" v-for="item in hotradio">
                        <div class="left">
                            <img :src="item.radio_cover" alt="">
                            <div class="pay-great bg-r color-f center fs-22" v-if="item.radio_copyright_free>0">付费精品</div>
                        </div>
                        <div class="right">
                            <p class="fs-32 overFlow">{{item.radio_name}}</p>
                            <p class="fs-26 color-9 overFlow-2">{{item.radio_desc}}</p>
                            <p class="fs-26 color-9">节目：{{item.program_number}}</p>
                            <p class="fs-32 color-r" v-if="item.radio_copyright_free>0">&yen; {{item.radio_copyright_free}}</p>
                        </div>
                    </div>
                </div>
                <div class="center nocontent" v-else>暂无数据</div>
            </div>
            <div class="type-list" v-else>
                <div v-if="musiclist[0]">
                    <div class="list-item space-between padding-24" v-for="item in musiclist">
                        <div class="left">
                            <img :src="item.radio_cover" alt="">
                            <div class="pay-great bg-r color-f center fs-22" v-if="item.radio_copyright_free>0">付费精品</div>
                        </div>
                        <div class="right">
                            <p class="fs-32 overFlow">{{item.radio_name}}</p>
                            <p class="fs-26 color-9 overFlow-2">{{item.radio_desc}}</p>
                            <p class="fs-26 color-9">节目：{{item.program_number}}</p>
                            <p class="fs-32 color-r" v-if="item.radio_copyright_free>0">&yen; {{item.radio_copyright_free}}</p>
                        </div>
                    </div>
                </div>
                <div class="center nocontent" v-else>暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'分类',
            inx:-2,
            tishi:false,
            id:null,
            playid:null,
            noplay:require('../../assets/index/playradio.png'),
            playing:require('../../assets/index/playing.png'),
            fire:require('../../assets/mine/fire.png'),
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // 循环
                loop: false,
                // 设定初始化时slide的索引
                initialSlide: 0,
                // 滑动速度
                speed:300,
                // 滑动方向
                loopedSlides :1,
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                slidesPerView: 'auto',
                // autoplay: {
                //     delay: 1500,
                //     disableOnInteraction: false
                // },
                on: {
                    // 滑动之后回调函数
                    slideChangeTransitionStart: function () {
                        /* realIndex为滚动到当前的slide索引值 */
                        this.imgIndex = this.realIndex - 1
                    }
                },
                
            },
            typelist:[],
            radiolist:[
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                //     isplay:1,
                // },
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                //     isplay:0,
                // }
            ],
            musiclist:[
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //     introduce:'介绍电台一句话',
                //     num:10,
                //     price:199,
                // },
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //     introduce:'介绍电台一句话',
                //     num:10,
                //     price:0,
                // }
            ],
            hotradio:[
                //   {
                //         music_list_photo:require('../../assets/image/cove.png'),
                //         music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //         introduce:'介绍电台一句话',
                //         num:10,
                //         price:199,
                //     },
                //     {
                //         music_list_photo:require('../../assets/image/cove.png'),
                //         music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //         introduce:'介绍电台一句话',
                //         num:10,
                //         price:0,
                //     }  
            ]
        }
    },
    created(){
        this.id=this.$route.query.type
        this.getradioCate()
        this.gethotshow()
        this.gethotradio()
    },
    methods:{
        getradioCate(){
            let url = this.$host1 + `home/radio/radioCate`
            this.$axios.get(url,{
                params:{
                    radio_first_cate:this.id
                }
            }).then(res => {
               //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.title=resData.data.first_cate_name
                    this.typelist=resData.data.second_cate_name
                    
                }else{
                    this.typelist=[]
                    this.AlertWin(resData.message);
                } 
                }
            }).catch(() => {
                this.typelist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gethotshow(){
            let url = this.$host1 + `home/radio/hotRadioProgram`
            this.$axios.get(url,{
                params:{
                    radio_first_cate:this.id
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.radiolist=resData.data
                }else{
                    this.radiolist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.radiolist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gethotradio(){
            let url = this.$host1 + `home/radio/hotRadio`
            this.$axios.get(url,{
                params:{
                    radio_first_cate:this.id
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.hotradio=resData.data
                }else{
                    this.hotradio=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.hotradio=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        select(i,item){
            //console.log(item)
            if(item.id){
                this.getmusiclist(item.id)
            }
            this.inx=i
        },
        getmusiclist(id){
            let url = this.$host1 + `home/radio/radioCate`
            this.$axios.get(url,{
                params:{
                    radio_first_cate:this.id,
                    radio_second_cate:id
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.musiclist=resData.data.result
                }else{
                    this.musiclist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.musiclist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        show(){
            this.tishi=true
        },
        notshow(){
            setTimeout(()=>{
                this.tishi=false
            },3000)
            
        },
        play(i){
            this.playid=i.id
        }
    }
}
</script>
<style lang="scss">
.types{
    .top-list{
        position: fixed;
        top: 1rem;
        left: 0;
        z-index: 99;
        //margin-top: 1rem;
        height: 1rem;
        width: 100%;
        border-bottom: 0.01rem solid #e9e9e9;
        .swiper{
            width: 100%;
            height: 1rem;
            .swiper-slide{
                padding: 0 0.2rem;
                box-sizing: border-box;
                width:auto !important;
                //margin-right:0.2rem;
            }
            .swiper-slide:last-child{
                margin-right: 0!important;
            }
            .item{
                //background-color: greenyellow;
                width: 100%;
                height: 1rem;
                position: relative;
                p{
                    //background-color: red;
                    width: 100%;
                    line-height: 1rem
                }
                .current{
                    color: #540479;
                    font-size: 0.36rem;
                    font-weight: bold;
                }
                .current::after{
                    content: "";
                    width: 0.5rem;
                    height: 0.05rem;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: -0.25rem;
                    border-radius: 0.1rem;
                    background-color: #540479;
                }
            }
        }
    }
    .content{
        margin-top: 2rem;
        width: 100%;
        height: auto;
        .hot-show{
            .top{
                height: 1rem;
                .left{
                    position: relative;
                    height: 100%;
                    p{
                        font-weight: bold;
                    }
                    span{
                        width: 0.33rem;
                        height: 0.33rem;
                        border:0.01rem solid #999;
                        margin-left: 0.2rem;
                    }
                    .tishi{
                        width: 7rem;
                        height: 0.8rem;
                        position: absolute;
                        margin-top: 1rem;
                        border-radius: 0.06rem;
                        background-color: rgba($color: #000000, $alpha: 0.8)
                    }
                    .tishi::before{
                        content: "";
                        width: 0;
                        height: 0;
                       // margin-left: 0.4rem;
                        width: 0px;
                        height: 0px;
                        position: absolute;
                        top: -0.53rem;
                        left: 2.5rem;
                        border-left: 0.35rem solid transparent;
                        border-top: 0.2rem solid transparent;
                        border-right: 0.35rem solid rgba($color: #000000, $alpha: 0.8);
                        border-bottom: 0.2rem solid transparent;
                        //opacity: 0.7;
                        transform: rotate(90deg);
                    }
                }
            }
            .list{
                .list-item{
                    height: 1.75rem;
                    width: 100%;
                    border-bottom: 0.01rem solid #e9e9e9;
                    .left{
                        width: 1.5rem;
                        height: 1.5rem;
                        border-radius: 0.22rem;
                        object-fit: cover;
                    }
                    .right{
                        height: 1.3rem;
                        width: calc(100% - 1.8rem);
                        //background-color: greenyellow;
                        .flex-column{
                            height: 100%;
                            .overFlow{
                                width: 4.5rem;
                            }
                        }
                        .yuan{
                            width: 0.56rem;
                            height: 0.56rem;
                            margin-right: 0.2rem;
                        }
                        .fire{
                            width: 0.32rem;
                            height: 0.35rem;
                            margin-left: 0.3rem;
                            margin-right: 0.2rem;
                        }
                        .fires{
                            width: 0.32rem;
                            height: 0.35rem;
                            margin-right: 0.2rem;
                        }
                        .play{
                            img{
                                width: 0.44rem;
                                height: 0.44rem;
                            }
                        }
                    }
                }
            }
        }
        .type-list{
            .list-item{
                height: 2.5rem;
                .left{
                    position: relative;
                    width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 0.1rem;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 0.1rem;
                    }
                    .pay-great{
                        width: 1.1rem;
                        height: 0.4rem;
                        position: absolute;
                        top: 0;
                        left: 0;
                        border-radius: 0.1rem 0 0.1rem 0;
                    }
                }
                .right{
                    width: calc(100% - 2.4rem);
                    height: 1.8rem;
                }
            }
            
        }
        .nocontent{
            width: 100%;
            height: calc(100% - 2rem);
            position: absolute;
        }
    }
}
</style>